<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>damo2</title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" class="app">
			<!-- v-cloak 可以解决 刷新速度慢 出现{{msg}}问题 
				标签定义方法为 v-xxx 不可随便打字符串		-->
			<p v-cloak>{{msg}}</p>
			<!-- v-text="" 作用和 {{msg}} 读取值一样 但是v-text可以解决刷新速度慢出现{{msg}} 的问题 因为标签中没有内容 是直接v-text读取到的 如果标签里面有内容 则 v-text覆盖里面的内容 但是呢 {{msg}} 不会覆盖-->
			<h1 v-text="msg"></h1>
			<p>{{msg2}}</p>
			<!-- v-html可以转义 吧内容当成html输出 -->
			<h1 v-html="msg2">1</h1>
			<!-- v-bind 在vue是用来绑定属性的指令 也可以使用: 冒号 也是v-bind 这是他的简写 v-bind中 可以写合法的js表达式 -->
			<input type="button" value="button" :title="title+ '123'"/>
			<input type="button" value="按钮" @click="show" />
		</div>
		<script src="../../资料/vue-2.4.0.js"></script>
		<script>
			var vm = new Vue ({
				el: '#app',
				data: {
					msg: '1',
					msg2: '<h1>你又来了</h1>',
					title: '自定义'
				},
				methods: {
					show: function () {
						alert('hello world')
					}
				}
			})
		</script>
	</body>
</html>
